<template>
  <div>
    <download></download>
    <div class="w-[14rem] mx-auto">
      <div class="card flex items-center justify-between gap-[.33rem] px-[.6rem] py-[.28rem]">
        <div class="shrink-0 text-center">
          <img src="@/assets/p1.png" class="w-[2.4rem] h-[2.4rem]" alt="">
          <p>自由交易 极速到账</p>
        </div>
        <img src="@/assets/line.png" class="line w-[2.1rem]" alt="">
        <div class="shrink-0 text-center">
          <img src="@/assets/p2.png" class="w-[2.4rem] h-[2.4rem]" alt="">
          <p>安全风控 全额赔付</p>
        </div>
        <img src="@/assets/line.png" class="line w-[2.1rem]" alt="">
        <div class="shrink-0 text-center">
          <img src="@/assets/p3.png" class="w-[2.4rem] h-[2.4rem]" alt="">
          <p>便捷使用 一触即付</p>
        </div>
      </div>
      <div class="mol mt-[1.28rem] flex items-center justify-between text-[0rem]">
        <div>
          <h3 class="text-[.32rem] text-[#1A1A1A] font-bold">随时随地、一触即付</h3>
          <div class="text-[.16rem] font-medium leading-[.28rem] text-[#1A1A1A] mt-[.44rem] mb-[.64rem]">MBpay全新升级，适用于更多应用场景，安全性能更强大风控严格、<br/>便捷易用，能有效满足您的日常需求</div>
          <div class="flex items-center justify-between">
            <div class="dselect flex justify-between items-center px-[0.2rem]">
              <span class="text-[.2rem] text-[#006EF9] shrink-0">数量</span>
              <div class="divider"></div>
              <a-input value="6.000" class="text-right"></a-input>
            </div>
            <div class="dselect text-center w-[1.6rem]">
              <a-select
                v-model:value="value"
                style="width: 100%"
                placeholder="select one country"
                option-label-prop="children"
              >
                <a-select-option value="china" label="China">
                  MB
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="flex items-center justify-between mt-[.26rem]">
            <div class="dselect mr-[.2rem] flex justify-between items-center px-[0.2rem]">
              <span class="text-[.2rem] text-[#006EF9] shrink-0">得到</span>
              <div class="divider"></div>
              <a-input value="0.10092" class="text-right"></a-input>
            </div>
            <div class="dselect text-center w-[1.6rem]">
              <a-select
                v-model:value="value"
                style="width: 100%"
                placeholder="select one country"
                option-label-prop="children"
              >
                <a-select-option value="china" label="China">
                  BTC
                </a-select-option>
              </a-select>
            </div>
          </div>
          <a-button class="btn" type="primary" block>立即购买</a-button>
        </div>
        <img src="@/assets/p4.png" class="w-[6.3rem] h-[6.3rem]" alt="">
      </div>
      <div class="mt-[1.56rem] mb-[.98rem]">
       <div class="text-center">
         <h2 class="text-[.36rem] leading-[.45rem] font-[500] mb-[.18rem]">MBpay支持币种</h2>
          <p class="mt-[.4rem] text-[.24rem]">多种数字货币类型，多种链上协议选择，为用户数字币交易的<br/>多样性，保驾护航</p>
          <ul class="mol2 mb-[1rem] grid gap-[.4rem] grid-cols-3 mt-[1.2rem]">
            <li v-for="item in list" :key="item.id" class="item px-[.4rem] rounded-[.3rem] pt-[.5rem] pb-[.45rem] flex-1 bg-white">
              <div><img :src="item.icon" alt="" class="w-[.8rem] h-[.8rem] mx-auto"></div>
              <h3 class="text-[.3rem] leading-[.45rem] font-[500] mt-[.55rem!important]">{{ item.title }}</h3>
              <p class="text-[.2rem] leading-[.36rem] text-[#6D7783] font-[500]" v-html="item.desc"></p>
            </li>
          </ul>
       </div>
      </div>
    </div>
    <div class="mol3 mt-[1.75rem] bg-[#f8f9fd] rounded-[3.2rem]">
      <div class="mol3-1 flex items-center justify-between w-[14rem] mx-auto h-full">
        <img src="@/assets/v1.png" class="w-[6rem] h-[6rem]" alt="">
        <div class="mol3-2">
          <h2 class="text-[#006EF9] text-[.38rem] font-bold">行业领先的安全性</h2>
          <div class="flex items-center gap-[.14rem] mt-[.45rem]">
            <img src="@/assets/radio.png" class="w-[.24rem] h-[.24rem]" alt="">
            <span class="text-[.24rem] font-bold">多年支付行业经验，从无安全事故</span>
          </div>
          <p class="text-[#767676] text-[.2rem] pt-[.2rem]">拥有业内顶尖的安全团队，搭建了完善的风险控制架构，实时监控异常数据，确保MBpay账户安全、交易安全。</p>
          <div class="flex items-center gap-[.14rem] mt-[.45rem]">
            <img src="@/assets/radio.png" class="w-[.24rem] h-[.24rem]" alt="">
            <span class="text-[.24rem] font-bold">强大又好用的钱包操作，无门槛</span>
          </div>
          <p class="text-[#767676] text-[.2rem] pt-[.2rem]">在全球顶尖的数字资产交易平台，为新手、高级交易者和机构用户提供工具。</p>
          <div class="flex items-center gap-[.14rem] mt-[.45rem]">
            <img src="@/assets/radio.png" class="w-[.24rem] h-[.24rem]" alt="">
            <span class="text-[.24rem] font-bold">钱包、交易、充值、提现一站搞定</span>
          </div>
          <p class="text-[#767676] text-[.2rem] pt-[.2rem]">多终端完美兼容，随时满足各种场景的交易需求。</p>
        </div>
      </div>
    </div>
    <div class="w-[14rem] mx-auto">
      <div class="mol4-1 flex items-center justify-between py-[.9rem]">
        <div class="flex flex-col">
          <img src="@/assets/v3.png" class="h-[1.35rem]" alt="">
          <p class="text-[#3D3D3D] text-[.2rem] pt-[.6rem] pb-[.8rem]">方便快捷，支持 MB BTC USDC ETH BNB TRX和 USDT<br/>一键互兑</p>
          <button class="btn2">即可开启MB旅程</button>
        </div>
        <img src="@/assets/v2.png" class="w-[5.38rem]" alt="">
      </div>
    </div>
    <div class="mol5 bg-[#F7F9FD] py-[.9rem]">
      <div class="mol5-1 w-[14rem] mx-auto grid grid-cols-2 gap-[.48rem]">
        <div class="item flex items-center h-[2.55rem] rounded-[.2rem] bg-white gap-[.24rem] pl-[.56rem]" v-for="v in boardList" :key="v.id" :class="[v.id==1?'mt-[1.2rem]':'',v.id==4?'mt-[-1.2rem]':'']">
          <img class="w-[1.2rem]" :src="v.icon" alt="">
          <div>
            <h3 class="text-[.32rem] mb-[.32rem] text-black">{{ v.title }}</h3>
            <p class="text-[#6D7783] text-[.16rem] leading-[.24rem]">{{ v.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import download from './download.vue'
import { Select, SelectOption } from 'ant-design-vue';
import { data } from 'autoprefixer';

const value = ref('china');

const getImage = (docName) => {
  return new URL(`../assets/${docName}`, import.meta.url).href;
};

const list = ref([
  {
    id: 1,
    icon: getImage('n1.svg'),
    title: '泰达币 USDT',
    desc: 'Tether （USDT）是世界上第一个、使用最广泛的稳定币，也是市值第三大的加密货币',
  },
  {
    id: 2,
    icon: getImage('n2.svg'),
    title: '比特币 BTC',
    desc: '比特币是市场上最受欢迎的加密货币之一，由中本聪于 2009年首次出。此后，其市值始终在加密货币领域稳居高位。',
  },
  {
    id: 3,
    icon: getImage('n5.svg'),
    title: '美元稳定币 USDC',
    desc: 'USDC 是一种稳定币，由 CENTRE联盟发行，以美元为锚定，每一个 USDC代表了1美元的价值。',
  },
  {
    id: 3,
    icon: getImage('n4.svg'),
    title: '以太坊 ETH',
    desc: '以太坊是一个去中心化的区块链网络，其以太币 （ETH）被广泛用于创建和部署去中心化应用和智能合约。',
  },
  {
    id: 3,
    icon: getImage('n5.svg'),
    title: '波币 RTX',
    desc: 'TRON （TRX） 是由加密货币企业家Justin Sun于2014年创建的区块链平台。它专注于改变媒体和内容创作行业的格局。',
  },
  {
    id: 3,
    icon: getImage('n6.svg'),
    title: '币安币 BNB',
    desc: '币安币（BNB）是支持整个BNB Chain生态系统的加密货币，也是BNB Smart Chain的原生代币。',
  },
]);

const boardList = ref([
  {
    id: 1,
    icon: getImage('v5.svg'),
    title: '更简单',
    desc: '直观界面，智能引导<br/>轻松管理您的数字资产',
  },
  {
    id: 2,
    icon: getImage('v6.svg'),
    title: '更省心',
    desc: '直观界面，智能引导<br/>轻松管理您的数字资产',
  },
  {
    id: 3,
    icon: getImage('v7.svg'),
    title: '更安全',
    desc: '直观界面，智能引导<br/>轻松管理您的数字资产',
  },
  {
    id: 4,
    icon: getImage('v8.svg'),
    title: '更极速',
    desc: '直观界面，智能引导<br/>轻松管理您的数字资产',
  },
]);
</script>

<style lang="less" scoped>
.card {
  background: #fff;
  border-radius: .2rem;
  padding-bottom: .65rem;
  color: #1A1A1A;
  font-size: .2rem;
  font-weight: 600;
  position: relative;
  margin-top: -1.5rem;
  box-shadow: 0 .2rem .2rem rgba(0,0,0,0.1);
}
.dselect {
  border: 1.5px solid #006EF9;
  border-radius: .18rem;
  height: .78rem;
  font-size: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  /deep/.ant-select-selector {
    height: 100%;
    font-size: .26rem;
  }
}
.divider {
  width: 1px;
  height: .3rem;
  margin: 0 .4rem;
  background: #006EF9;
  & + .ant-input {
    width: 1.4rem;
    border: none;
    font-weight: 600;
    height: 100%;
    font-size: .24rem;
  }
}
.ant-select {
  /deep/.ant-select-selector {
    border: none;
  }
}
.btn {
  border-radius: 1rem;
  margin-top: .45rem;
  height: .64rem;
  font-size: .24rem;
}
.btn2 {
  padding: .1rem 0;
  color: #fff;
  background-color: #006EF9;
  font-size: .2rem;
  border-radius: .27rem;
  width: 4.24rem;
}
.item {
  box-shadow: 0px 0.09rem 0.05rem 1px rgba(30,87,193,0.1);
}
</style>

<style lang="less" scoped>
@media (max-width: 600px) {
  .card {
    padding: 0;
    flex-direction: column;
    .line {
      display: none;
    }
  }
  .mol {
    flex-direction: column;
    text-align: center;
    margin-top: .8rem;
  }
  .mol2 {
    padding: 0 .4rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .mol3 {
    border-radius: 0;
    .mol3-1 {
      flex-direction: column;
    }
    .mol3-2 {
      padding: 0 .4rem;
    }
  }
  .mol4-1 {
    flex-direction: column;
    .btn2 {
      margin: auto;
    }
  }
  .mol5 {
    padding: .4rem;
    .mol5-1 {
      grid-template-columns: repeat(1, 1fr);
      .item {
        margin: 0;
      }
    }
  }
}
</style>
